<template>
	<view>
		<u-toast ref="uToast"></u-toast>

		<!-- <u-tabbar :value="value" @change="changeTab" :fixed="true" :placeholder="true" activeColor="#000" inactiveColor="#666">
			<u-tabbar-item text="首页" name="index">
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="/static/images/tabbar/ic_home_unselect.png"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="/static/images/tabbar/ic_home_select.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="企业" name="company">
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="/static/images/tabbar/ic_company_unselect.png"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="/static/images/tabbar/ic_company_select.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="卖卡" name="card-list">
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="/static/images/tabbar/ic_card_unselect.png"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="/static/images/tabbar/ic_card_select.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="订单" name="order">
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="/static/images/tabbar/ic_order_unselect.png"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="/static/images/tabbar/ic_order_select.png"></image>
			</u-tabbar-item>
			<u-tabbar-item text="我的" name="mine">
				<image class="u-page__item__slot-icon" slot="inactive-icon"
					src="/static/images/tabbar/ic_mine_unselect.png"></image>
				<image class="u-page__item__slot-icon" slot="active-icon"
					src="/static/images/tabbar/ic_mine_select.png"></image>
			</u-tabbar-item>
		</u-tabbar> -->
		
		<u-tabbar :value="value" @change="changeTab" :fixed="true" :placeholder="true" activeColor="#2F7FFC" inactiveColor="#666">
		  <u-tabbar-item 
		    v-for="item in (isShow ? tabList : testTabList)" 
		    :key="item.name"
		    :text="item.text" 
		    :name="item.name"
		  >
		    <image slot="inactive-icon" :src="item.icon" class="u-page__item__slot-icon"/>
		    <image slot="active-icon" :src="item.activeIcon" class="u-page__item__slot-icon"/>
		  </u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "custom-tabbar",
		props: {
			value: {
				type: String,
				default: 'index'
			}
		},
		// async created() {
		// 	this.isOfficial = await this.$app.getIsOffiacal();
		// },
		data() {
			return {
				isShow: uni.getStorageSync("isShow"),
				tabList: [
					{ name: 'index', text: '首页', icon: '/static/images/tabbar/ic_home_unselect.png', activeIcon: '/static/images/tabbar/ic_home_select.png'},
					{ name: 'to-invita', text: '邀请', icon: '/static/images/tabbar/ic_invita_unselect.png', activeIcon: '/static/images/tabbar/ic_invita_select.png'},
					{ name: 'card-list', text: '卖卡', icon: '/static/images/tabbar/ic_card_unselect.png', activeIcon: '/static/images/tabbar/ic_card_select.png'},
					{ name: 'order', text: '订单', icon: '/static/images/tabbar/ic_order_unselect.png', activeIcon: '/static/images/tabbar/ic_order_select.png'},
					{ name: 'mine', text: '我的', icon: '/static/images/tabbar/ic_mine_unselect.png', activeIcon: '/static/images/tabbar/ic_mine_select.png'},
				],
				testTabList: [
					{ name: 'index', text: '首页', icon: '/static/images/tabbar/ic_home_unselect.png', activeIcon: '/static/images/tabbar/ic_home_select.png'},
					// { name: 'TestCompany', text: '企业', icon: '/static/images/tabbar/ic_company_unselect.png', activeIcon: '/static/images/tabbar/ic_company_select.png'},
					// { name: 'to-invita', text: '邀请', icon: '/static/images/tabbar/ic_invita_unselect.png', activeIcon: '/static/images/tabbar/ic_invita_select.png'},
					// { name: 'card-shop', text: '报价', icon: '/static/images/tabbar/ic_card_unselect.png', activeIcon: '/static/images/tabbar/ic_card_select.png'},
					{ name: 'mine', text: '我的', icon: '/static/images/tabbar/ic_mine_unselect.png', activeIcon: '/static/images/tabbar/ic_mine_select.png'},
				]
			};
		},
		methods: {
			async changeTab(name) {
				console.log(name);

				if ((name == 'order' || name == 'mine') && this.isShow) {
					if (!this.$app.isLogin()) {
						this.$refs.uToast.show({
							type: 'default',
							message: '请您先登录',
							complete() {
								uni.navigateTo({
									url: '/pages/login-nav/login-nav',
								});
							},
						});
						return;
					} else {
						const res = await this.$http({
							method: 'GET',
							url: '/user/base/info',
						});
						if (res == null) {
							return;
						}
					}
				}

				// this.value = name;
				uni.switchTab({
					url: `/pages/${name}/${name}`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* 调整未选中状态下的图标大小 */
	.u-page__item__slot-icon {
		width: 50rpx;
		/* 设置你想要的宽度 */
		height: 50rpx;
		/* 设置你想要的高度 */
	}
</style>